<template>
  <div>
    <div id="line" style="width: 600px;height:500px;"></div>
    <button type="button" class="btn btn-success" @click="getLine">重新获取数据</button>
    <button type="button" class="btn btn-primary" @click="drawLine">绘制图表</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 代替图表中的series项，通过mockjs获取随机数据
      lineData: []
    };
  },
  methods: {
    drawLine() {
      var option = {
        title: {
          text: "玩玩折线图",
          x: 'center'
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"],
          left: 'left',
          orient: 'vertical'
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
        },
        yAxis: {
          type: "value"
        },
        series: this.lineData
      };
      this.$echarts.init(document.getElementById("line")).setOption(option);
    },
    // 发送Ajax请求获取数据，存储到lineData之中
    getLine() {
      this.$axios
        .get("/getLineChart")
        .then(response => {
          this.lineData = JSON.parse(response.data)["lineChart"];
          this.drawLine();
        })
        .catch(error => {
          console.log(error);
        });
    }
  },
  mounted: function() {
      this.getLine();
  }
};
</script>